<!-- 
      detail.html
      产品详细信息, id="detail"
      
      Created by tang on 2017-03-10.
      Copyright 2017 tang. All rights reserved.
 -->
<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	 <link rel="stylesheet" href="../css/swiper.css">
	<link rel="stylesheet" href="../css/detail.css" />
	<style type="text/css">
		.swiper-wrapper img{
			width: 100% !important;
		}
		.swiper-pagination-bullet-active{
			opacity: 1;
			background: #F53048;
		}
	</style>
</head>
<body class="white loading">
	<header class="mui-bar mui-bar-transparent short" style="width: 100%;">
	    <a class="mui-action-back mui-icon mui-pull-left bexta-white-back" style="width: 50px"><span></span></a>
	    <div id="collect" class="fun-btn mui-pull-right" ></div>
	    <h1 class="mui-title"></h1>
	</header>
	
	<div class="mui-content mui-scroll-wrapper " id="onescroll" style="padding-bottom: 70px;">
		<div id="ner" class="mui-scroll" >
			<div class="swiper-container" id="swiper1">
			    <div class="swiper-wrapper">
				    	<template v-for="(item,index) in msg.photo">
				        <div class="swiper-slide"><img :data-src="item" src="../icon/mask-big.jpg" class="maximg swiper-lazy" data-preview-src="" data-preview-group="1000" /></div>
				    </template>
			    </div>
			    <div class="swiper-pagination"></div> 
			    <!--<div id="share" class="fun-btn mui-pull-right"></div>-->
				<!--<div id="collect" class="fun-btn mui-pull-right" v-bind:class="msg.is_collect==1?'active':''"></div>-->
			</div>
		    <div class="mui-content-padded detail ">
				<div class="title afterborder">
					<div>{{msg.name}}</div>
				</div>
				<!--<div v-if="msg.commend_id==1">-->
					<ul class="mui-table-view " v-if="msg.model_id != 0">
					    <li class="mui-table-view-cell res">
					        <a class="mui-navigate-right" id="suit">套餐选择</a>
					        <div >
					       	 	{{join.name}} ： {{join.description}}
					        </div> 
					    </li>
					</ul>
				</div>
				<div class="detail_case afterborder" v-if="msg.photo_list.length!=0">
					<div class="ts" >取景影片</div>
					<div class="swiper-container" id="swiper2">
						<div class="swiper-wrapper">
							<template v-for="item in msg.photo_list">
								<div class="swiper-slide" >
									<img :src="item.photo"  alt="" data-preview-src="" data-preview-group="photo_list"  />
									<p>{{item.title}}</p>
								</div>
							</template>
						</div>
					</div>
				</div>
				<div style="height: 10px; background: #EBEBEB;" v-if="msg.photo_list.length!=0"></div>
				<div class="mui-content-padded detail ">
				<div v-if="msg.attr_d.length!=0">
					<ul class="mui-table-view ">
						<li class="mui-table-view-cell basic">
						 	<div class="ts">基本信息</div>
						 	<template v-for="(item,index) in msg.attr_d">
						 		 <p class="mui-clearfix" v-if="item.attr_value[0]"><span class="mui-pull-right">{{item.attr_value[0]}}</span>{{item.attr_name}}</p>
						 	 </template>
						 </li>
					</ul>
				</div>
				<div v-if="msg.attr_e.length!=0">
					<ul class="mui-table-view ">
						<template v-for="item in msg.attr_e">
							<li class="mui-table-view-cell basic">
						        <div class="ts">{{item.attr_name}}</div>
						     	<div class="labels">
						     		<template v-for="it in item.attr_value">
						     			<span>{{it}}</span>
						     		</template>
						     	</div>
						    </li>
						</template>
					    
					</ul>
				</div>
				<ul class="mui-table-view " v-if="msg.place">
					<li class="mui-table-view-cell basic">
						<div class="ts">场地地址:</div>
						<div class="labels">{{msg.place}}</div>
				    </li>
				</ul>
				
				<ul class="mui-table-view ">
				    <li class="mui-table-view-cell link" _id="comment" _title="用户评价" _href="comment.html" :_extras="'gid='+msg.id" >
				        <a class="mui-navigate-right">
				        	<span class="mui-pull-right comes" v-if="msg.buyer_praise!=0"><span>{{msg.buyer_praise}}</span>好评</span>用户评价
				        </a>
				    </li>
				</ul>
				
				<div class="comment afterborder" v-if="msg.discuss.length != 0">
					<template v-for="(item,index) in msg.discuss">
						<div class="score mui-clearfix">
							<div class="score_star mui-pull-left" :data-cover="item.score"></div>
						</div>
						<div class="text">
							{{item.contents}}
						</div>
						<div class="mui-row" >
							<div class="mui-col-xs-3 mui-col-sm-3" v-for="(items,k) in item.photo" >
								<div>
									<img :src="items" data-preview-src="" data-preview-group="discuss" alt="" />
								</div>
							</div>
						</div>
					</template>
				</div>
				<div class="merchant mui-clearfix afterborder meshopen" :data-id="msg.sid">
					<img :src="msg.shop_logo" alt="" />
					<div class="name">{{msg.shop_name}}</div>
					<!--<div class="mui-clearfix btn">
						<div class="mui-pull-left">
							<a  :data-phone="msg.shop_phone">联系供应商</a>
						</div>
						<div class="mui-pull-left">
							<a href="javascript:void(0)">进入店铺</a>
						</div>
					</div>-->
				</div>
				
				<template v-if="msg.text.length != 0">
					<ul class="mui-table-view  show_notics">
						<li class="mui-table-view-cell">
					        <a class="mui-navigate-right">
					        		退订政策
					        </a>
					    </li>
				   </ul>
			    		<div class="notics">
						<ul class="mui-table-view " >
						    <li class="mui-table-view-cell" v-for="item in msg.text">
						        <a >{{item.title}}</a>
						        <div v-for="(ita,index) in item.content">{{index+1}}.{{ita}}</div> 
						    </li>
						</ul>
					</div>
			    </template>
				
		    </div>
		    
		    
		    
		    
		    
		    
		    <div class="mui-content-padded detail detail-body">
		   		<div class="body-title">商品信息</div>
		   		<div class="body-content" v-html="msg.content">
		   		</div>
		    </div>
		    
		    <div class=" cainilike">
		   	 	<div class="ts">猜你喜欢</div>
		   	 	<div class="mui-row">
		   	 		<template v-for="item in msg.like">
						<div class="itemslink mui-col-xs-6 mui-col-sm-6 likes":data-id="item.id">
		   	 				<img :src="item.img" alt="" />
			    				<p class="name">{{item.name}}</p>
			    				<p class="price" v-if="item.price!=0.00">¥{{item.price}}</p>
			    				<p class="price" v-else>询价</p>
		   	 			</div>		   	 			
		   	 		</template>
		   	 	</div>
		    </div>
		    
		    
		    
		</div>
		<!--加入租赁车-->
		<div class="fixed-cart" style="z-index: 111111;">
			<template v-if="msg.model_id!=0">
				<div class="mui-pull-right" style="position: relative;z-index: 10;" v-if="join.sell_price!='0.00'"> 
					<a href="javascript:void(0)" class="mui-btn bexta-btn bexta-btn-red join-cart joincarts">立即租赁</a>
				</div>
				<div class="mui-pull-right" style="position: relative;z-index: 10;" v-else>
					<a href="javascript:void(0)" class="mui-btn bexta-btn bexta-btn-red join-cart query" :data-aid="msg.id" :data-pid="join.product_id" :data-cid="msg.commend_id" >询价</a>
				</div>
			</template>
			<template v-else>
				<div class="mui-pull-right" style="position: relative;z-index: 10;" v-if="msg.price!='0.00'"> 
					<a href="javascript:void(0)" class="mui-btn bexta-btn bexta-btn-red join-cart joincarts">立即租赁</a>
				</div>
				<div class="mui-pull-right" style="position: relative;z-index: 10;" v-else>
					<a href="javascript:void(0)" class="mui-btn bexta-btn bexta-btn-red join-cart query" :data-aid="msg.id"  :data-cid="msg.commend_id"  >询价</a>
				</div>
			</template>
			<div class="count-money" style="display: block;" >
				<template v-if="join&& join.sell_price=='0.00'">
					<span></span>
				</template>
				<template v-else>
					<span v-if="msg.model_id!=0">¥ {{join.sell_price}} /天</span>
					<span v-else>¥ {{msg.price}} /天</span>
				</template>
				
				<div class="score mui-clearfix" style="margin:0;display: none;">
					<div class="score_star mui-pull-left" :data-cover="msg.grade">
					</div>
				</div>
			</div>
		</div>
	</div>


<!--选择套装-->
<div id="select-suit" v-if="sp.model_id!=0">
	<div class="close"><img src="../icon/x.png"  alt="" /></div>
	<div class="suit-head">
		<div class="product">
			<img :src="join.img" class="maximg" alt="" />
		</div>
		<div class="suit-title">
			<span>¥ {{join.sell_price}}</span>
			<div>{{sp.name}}</div>
		</div>
	</div>
	<div class="suit-body" style="position: relative;height: 100px;">
		<div class="mui-scroll-wrapper suit-body"  >
		    <div class="mui-scroll">
		        <div class="suit-bodu-tab">
		        	<p>套餐 </p>
		        		<div class="mui-row">
		        			<template v-for="(item,index) in sp.spec">
		        				<div class="mui-col-xs-12 mui-col-sm-12" :data-id="item.product_id" :data-idx="index" v-if="item.product_id==join.product_id"><span class="active">{{item.name}} {{item.description}}</span></div>
		        				<div class="mui-col-xs-12 mui-col-sm-12" :data-id="item.product_id" :data-idx="index" v-else><span>{{item.name}} {{item.description}}</span></div>
		        			</template>
		        		</div>
		        </div>
		    </div>
		</div>
	</div>
	<div class="join-btn" >
		确认
	</div>
</div>



<script src="../js/mui.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/swiper.min.js"></script>
<script src="../js/mui.extend.js"></script>
<script src="../js/mui.pullToRefresh.js"></script>
<script src="../js/mui.pullToRefresh.material.js"></script>
<script src="../js/mui.zoom.js"></script>
<script src="../js/mui.previewimage.js"></script>
<script src="../js/bexta.js"></script>
<script type="text/javascript">
	mui.init({
		beforeback:function(){
			plus.webview.close(plus.webview.getWebviewById('detail_content'),'pop-out');
			if( plus.webview.currentWebview().opener() ){
				var opener = plus.webview.currentWebview().opener().id;
				if( opener != 'detail2' && opener != 'server' && opener != 'mHome' ){
					bexta.setStatus(false);
				}
			}else{
				bexta.setStatus(false);
			}
			
			
			return ;
		}
	});
	 mui.ready(function () {
	   document.querySelector('.mui-bar-transparent').style.height = (44 + bexta.getStatusHeight()) + 'px';	
	    document.querySelector('.mui-title').style.lineHeight = (50 + bexta.getStatusHeight()) + 'px';	
	   document.querySelector('.mui-bar .mui-icon').style.paddingTop = (10+bexta.getStatusHeight()) + 'px';
	   document.querySelector('#collect').style.top = (10+bexta.getStatusHeight()) + 'px';
	});
	var apps , vm, view;
	mui.plusReady(function () {
	    view = bexta.getWebview();
	    bexta.setStatus(true);
	    var send = {goods_id:view.pid};
	    var user = bexta.isLogin(true);
	    if( user && user.uid != '' ){
	    		send['uid'] = user.uid;
	    }
	    mui.later(function(){
	    		 plus.webview.getWebviewById('mHome') && plus.webview.getWebviewById('mHome').close('none')
	    },200)
	   
	    bexta.ajax('' + api.goods_detail, function(res){
//	    		console.log( JSON.stringify(res ));
	    		initVue(res);
	    }, {data:send}); 
	    
	    mui('body').on('tap', '.likes', function(){
	    		view.opener()&&view.opener().id=='detail2'&&view.opener().close('none');
	    		mui.later(function(){
	    			mui.openWindow({
		    			id:'detail2',
		    			url:'detail2.html',
		    			show:{autoShow:true,aniShow:'pop-in'},
					waiting:{autoShow:false},
		    			extras:{
		    				pid:this.getAttribute('data-id')
		    			}
		    		});
	    		},200, this)
	    });
	});
	window.addEventListener('toggleRefresh', function(evt){
		 var send = {goods_id:evt.detail.pid};
		 var user = bexta.isLogin(true);
	    if( user && user.uid != '' ){
	    		send['uid'] = user.uid;
	    }
		vm = null;
		apps = null;
		 bexta.ajax('' + api.goods_detail, function(res){
	    		initVue(res);
	    }, {data:send}); 
		
	});
	function initVue(das){
		var d =[],e = [];
		mui.each( das.attr, function(){
			if( this.attr_value.length == 1 ){
				d.push(this);
			}else{
				e.push(this);
			}
		})
		das['attr_d'] = d;
		das['attr_e'] = e;
		vm = new Vue({
			el:'#select-suit',
			data:{
				sp:das,
				join:das.spec[0]  //已选择套餐 查看的
			}
		});
		apps = new Vue({
			el:"#onescroll",
			data:{
//				cid:view.cid,
				msg:das,
				join:das.spec[0],  //已选择套餐 查看的
				
			},
			mounted:function(){
				initMounted();
				initEvent();
				document.querySelector('.mui-preview-image .mui-preview-header').style.top = bexta.getStatusHeight() + 'px';
				if( this.msg.is_collect == 1 ){
					document.querySelector('#collect').classList.add('active')
				}
				document.querySelector('.mui-title').innerHTML = this.msg.name;
				//记录历史
				bexta.joinHistory({
					id:this.msg.id,
					photo:this.msg.photo[0],
					name:this.msg.name,
					price:this.msg.price
				});
				//进商家主页
				mui('body').on('tap', '.meshopen', function(){
//					var par = view.opener();
//					if( par&& par.id == "mHome" ){
//						console.log( '1 back' )
//						mui.back();
//					}else{
						var id =this.getAttribute('data-id');
						plus.webview.getWebviewById('mHome')&&plus.webview.getWebviewById('mHome').close('none');
						mui.later(function(){
							bexta.openWithTitle({
								id:'mHome',
								url:'mHome.html',
								extras:{
									sid:id
								}
							},{
								backgroundImage:null,
								backgroundColor:"#FFF",
								bottomBorderColor:"#FFF",
								height:44 + bexta.getStatusHeight() + 'px',
								title:{
									text:' '
								},
								back:{
									image:{
										base64Data:bexta.viewHeader.backDrakImage,
										position:{
											top: bexta.getStatusHeight()+ 10 + 'px',
											left: "10px",
											width: "13px",
											height: "24px"
										}
									}
								}
							})
						},200)		
				
//				}
				});
				
//				$('.show_notics').click(function() {
//					if( $('.notics').hasClass('run') ){
//						$('.notics').removeClass('run');
//					}else{
//						$('.notics').addClass('run');
//					}
//				});
				mui('.show_notics').on('tap', 'li', function(){
					var notics = document.querySelector('.notics');
					if( notics.classList.contains('run') ){
						notics.classList.remove('run');
					}else{
						notics.classList.add('run');
					}
				});
				
				
				
			}
		});
	}
	function suit(){
		var wh = window.innerHeight;
		document.querySelector('.suit-body').style.height = wh*0.60-(88+50) + 'px';
		mui('#select-suit .mui-scroll-wrapper').scroll({
			deceleration: 0.0005 
		});
		var mask = null;
		mui('body').on('tap', '#suit', function() {
			var suit = document.querySelector('#select-suit'),
				scr = document.querySelector('body');
			mask = mui.createMask(function(){
				suit.classList.remove('run');
				scr.classList.remove( 'run' );
				function s() {
					suit.style.display = 'none';
					suit.removeEventListener('webkitTransitionEnd', s);
				}
				suit.addEventListener('webkitTransitionEnd', s);
			});
			mask.show();
			suit.style.display= 'block';
			setTimeout(function(){
				scr.classList.add( 'run' );
				suit.classList.add('run');
			});
		});
		mui('body').on('tap', '.close', function(){
			mask.close();
		});
		
		mui('#select-suit').on('tap', '.mui-row div', function(){
			mui.each(mui('#select-suit .mui-row div') ,function(){
				this.querySelector('span').classList.remove('active');
			});
			this.querySelector('span').classList.add('active');
			var oid = this.getAttribute('data-id'),
				idx = this.getAttribute('data-idx');
			if( oid == vm.join.product_id ){
				return ;
			}
			vm.join = vm.sp.spec[idx];
		});
		mui('#select-suit').on('tap', '.join-btn', function(){
			var selspan = mui('#select-suit .mui-row span.active')[0].parentNode;
			var oid = selspan.getAttribute('data-id'),
				idx = selspan.getAttribute('data-idx');
			apps.join = vm.sp.spec[idx];
			//获取档期
			bexta.ajax(api.select_spec, function(res){
				apps.msg.time = res.time;
			}, {data:{goods_id:apps.msg.id, product_id:vm.sp.spec[idx].product_id }});
			
			
		});
		
		mui('body').on('tap', '.join-btn', function() {
			mask.close();
		});
	}
	 function initMounted() {
	 	mui.init();
	 	document.querySelector('.loading').classList.add('loadRun');
		var mySwiper = new Swiper ('#swiper1', {
		    loop: false,
		    autoplay:4000,
		    lazyLoading:true,
		    lazyLoadingInPrevNext:true,
		    lazyLoadingOnTransitionStart:true,
		    pagination: '.swiper-pagination'
		});
		
		mui('.body-content img').each(function(){
			//data-preview-src="" :data-preview-group="k"
			this.setAttribute('data-preview-src', '');
			this.setAttribute('data-preview-group', 'content');
		});
		
		
		mui.previewImage();
		//套餐选择
		setTimeout(function(){
			if( apps.msg.model_id != 0 ){
				suit();
			}
		});
		//套餐选择 --- end
		//星星显示
		mui('.score_star').score({
			eventstar:false,
			fullStar:"../icon/icon_xingxing@2x.png",
			halfStar:"../icon/icon_bankexin@2x.png",
			voidStar:"../icon/icon_void@2x.png",
			success:function(){
//				console.log(111);
			}
		});
		
		
		//收藏
		mui('body').on('tap', '#collect', function(){
			var user = bexta.isLogin(true);
			if( !user ){
				//未登录
				mui.confirm("您还没有登录,是否登录?", TITLE, CONFIRM, function(item){
					if( item.index == 1 ){
						mui.openWindow({
							id:'login',
							url: '../center/login.html',
							show:{autoShow:true,aniShow:'zoom-fade-out'},
							waiting:{autoShow:false},
							extras:{
								refresh:'refresh'
							}
						});
					}
				});
			}else{
				if( apps.msg.is_collect == 0 ){
					//收
					bexta.ajax(api.collect, function(res,msg){
						mui.toast(msg);
						apps.msg.is_collect = 1;
						document.querySelector('#collect').classList.add('active')	
					}, {data:{uid:user.uid, goods_id:apps.msg.id}});
				}else{
					//删除
					bexta.ajax(''+api.del_collect, function(res,msg){
						mui.toast(msg);
						apps.msg.is_collect = 0;
						document.querySelector('#collect').classList.remove('active')						
					},{ data:{uid:user.uid,goods_id:apps.msg.id, product_id:0 } });
				}
			}
		});
		new Swiper('#swiper2', {
			slidesPerView: 3.3, //同时能显示多少个
			paginationClickable: false,
			spaceBetween: "3%", //右间距
			slidesOffsetBefore: 15,
			slidesOffsetAfter: 15,
			freeMode: true //使用惯性滑动
		});
		
		
	 }
	 window.addEventListener('setTitle', function(){
	 	document.querySelector('.mui-title').innerHTML = ''
	 });
	 function initEvent() {
	 	var loadTager = 0;
		var deceleration = mui.os.ios?0.003:0.0009;
		var scroll = mui('#onescroll.mui-scroll-wrapper').scroll({
			bounce:false
		});
//		var scroll = mui('#onescroll.mui-scroll-wrapper').scroll({
//			bounce: true,
//			indicators: true, //	是否显示滚动条
//			deceleration:deceleration,
//			isActive:false,
//	   		endUp:function(that){
//	   			if( that.maxScrollY > that.y ){
//	   				var sy = that.maxScrollY - that.y; 
//	   				if( sy > 80 ){
//	   					mui.openWindow({
//	   						id:'detail_content',
//	   						url:'detail_content.html',
//	   						show:{autoShow:true,aniShow:'slide-in-bottom'},
//							waiting:{autoShow:false},
//							styles:{
//								top:(44 + bexta.getStatusHeight()) + 'px'
//							},
//							extras:{
//								html:apps.msg.content
//							}
//	   					})
//	   					document.querySelector('.mui-title').innerHTML = '图文详情'
//	   				}
//	   			}
//	   		},
//	   		uping:function(that){
//	   			if( !this.isActive ){
//	   				this.createWiteDivToBottom();
//	   			}
//	   		},
//	   		createWiteDivToBottom:function(){
//	   			this.isActive = !this.isActive;
//	   			var odiv = document.createElement('div');
//	   			odiv.className = 'pickbottom';
//	   			odiv.innerHTML = '上拉查看图文';
//	   			document.querySelector('#onescroll.mui-scroll-wrapper .mui-scroll').appendChild(odiv);
//	   		}
//		});
		mui('.mui-bar-transparent').transparent2({
			scroll:scroll,
   			offset:300,
   			bgr:true,
	   		success:function(obj, opa){
	   			var backbtn = obj.element.querySelector('.bexta-white-back');
	   			document.querySelector('.mui-title').style.opacity = opa;
	   			if( opa > 0.3 ){
	   				backbtn.classList.add('bexta-drak-back');
	   			}else{
	   				backbtn.classList.remove('bexta-drak-back')
	   			}
	   			if( opa > 0.8 ){
	   				obj.element.classList.add('active');
	   			}else{
	   				obj.element.classList.remove('active');
	   			}
	   		}
	   	});
		//加入租赁车
		mui('body').on('tap', '.joincarts', function(evt){
			var user = bexta.isLogin();
			if(user && user.uid != '' ){
				var send = {
					uid:user.uid,
					goods_id:apps.msg.id,
					product_id:apps.join&&apps.join.product_id || 0,
					timer:apps.msg.time,
					commend_id:apps.msg.commend_id,
					type:'detail' 
				};
				mui.openWindow({
					url:"calendar.html",
					id:"calendar",
					extras:send,
					show:{autoShow:true,aniShow:'slide-in-bottom'}
				});
			}else{
				mui.openWindow({
					id:'login',
					url: '../center/login.html',
					show:{autoShow:true,aniShow:'zoom-fade-out'},
					waiting:{autoShow:false},
					extras:{
						refresh:'refresh'
					}
				});
			}
		});
		//询价
		//_id="enquiry" _href="enquiry.html" _title="询价" 
		mui('body').on('tap', '.query', function(){
			var user = bexta.isLogin();
			if( user && user.id !='' ){
				var cid = this.getAttribute('data-cid'),
					aid = this.getAttribute('data-aid'),
					pid = this.getAttribute('data-pid');
				bexta.openWithTitle({
					id:'enquiry',
					url:'enquiry.html',
					extras:{
						cid:cid,aid:aid,pid:pid
					}
				},{
					title:{
						text:"询价" 
					}
				});
			}else{
				mui.openWindow({
					id:'login',
					url: '../center/login.html',
					show:{autoShow:true,aniShow:'zoom-fade-out'},
					waiting:{autoShow:false},
					extras:{
						refresh:'refresh'
					}
				});
			}
		});
	 }
</script>
</body>
</html>